<template>
  <div id="pageNumber">
    <ul>
      <li @click="onPrevPage()">上一页</li>
      <li @click="onPageActive(item, index)" :class="{pageActive: pageActiveIndex === index}" v-for="(item, index) in pageTotal" :key="index">{{item}}</li>
      <li @click="onNextPage()">下一页</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'pageNumber',
  props: {
    pageTotal: {
      type: Number,
      default: 3
    }
  },
  data () {
    return {
      pageActiveIndex: 0
    }
  },
  created () {
  },
  methods: {
    onPrevPage () {
      this.pageActiveIndex--
      if (this.pageActiveIndex <= 0) {
        this.pageActiveIndex = 0
      }
      let page = this.pageActiveIndex
      this.$emit('prevPage', ++page)
      this.onPageChange()
    },
    onPageActive (item, index) {
      this.pageActiveIndex = index
      this.$emit('pageActive', item)
      this.onPageChange()
    },
    onNextPage () {
      this.pageActiveIndex++
      if (this.pageActiveIndex >= this.pageTotal) {
        let langth = this.pageTotal
        this.pageActiveIndex = --langth
      }
      let page = this.pageActiveIndex
      this.$emit('nextPage', ++page)
      this.onPageChange()
    },
    onPageChange () {
      let page = this.pageActiveIndex
      this.$emit('pageChange', ++page)
    }
  }
}
</script>

<style lang="less" scoped>
#pageNumber{
  padding: .2rem 0;
  ul{
    text-align: center;
    li{
      display: inline-block;
      font-size: .16rem;
      font-weight: 500;
      color: #333;
      line-height: .24rem;
      background-color: #fff;
      padding: .03rem .1rem;
      margin: 0 .05rem;
    }
    li:active{
      color: #fff;
      background-color: #15A29C;
    }
  }
  .pageActive{
    color: #fff;
    background-color: #15A29C;
  }
}
</style>
